<template>
  <div @click="toSearchBox">
    <van-sticky>
      <van-search shape="round" disabled background="#fff"> </van-search>
      <van-notice-bar :scrollable="false">
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="2000"
          :show-indicators="false"
        >
          <van-swipe-item class="color">热词搜索榜</van-swipe-item>
          <van-swipe-item class="van-ellipsis" v-for="item,index in keyworde" :key="index"><span>{{item.searchWord}}</span></van-swipe-item>
        </van-swipe>
      </van-notice-bar>
    </van-sticky>
  </div>
</template>

<script>
import { GethotAPI } from "@/api/api.js";
export default {
  name: "MusicSearch",

  data() {
    return {
      keyworde: [],
    };
  },

  mounted() {
    this.GethotAPI();
  },

  methods: {
    toSearchBox() {
      this.$router.push("/MusicSearchBox");
    },
    GethotAPI() {
      GethotAPI().then((res) => {
        if (res.status == 200) {
          this.keyworde=res.data.data
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.color{color: #FF0000;}
.notice-swipe {
  height: 2.5rem;
  line-height: 2.5rem;
  box-sizing: border-box;
}
.van-notice-bar {
  z-index: 1;
  position: absolute;
  top: .5rem;
  left: 2.0625rem;
  color: #333;
  width: 100%;
  text-align: left;
  max-width: 18.75rem;
  background-color: transparent;
  overflow: hidden;
}
</style>